<template>
  <div class="app-container">
    <el-table :data="tableData" style="width: 100%" row-key="deptId" border lazy default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column prop="deptName" label="名称"> </el-table-column>
      <el-table-column prop="leader" label="负责人"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="deptType" label="类型">
        <template slot-scope="scope">
          <span>{{ scope.row.deptType === 1 ? "公司" : "部门" }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="queryDept(scope.row)" type="text" size="small">查看</el-button>
          <el-button @click="addDept(scope.row)" type="text" size="small">新增</el-button>
          <el-button @click="editDept(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="delDept(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="dialog.title" :visible.sync="dialog.dialogFormVisible" @close="handleClose">
      <el-form :model="deptForm">
        <el-form-item label="部门名" :label-width="formLabelWidth">
          <el-input v-model="deptForm.deptName" autocomplete="off" :disabled="dialog.disable"></el-input>
        </el-form-item>
        <el-form-item label="显示顺序" :label-width="formLabelWidth">
          <el-input-number v-model="deptForm.orderNum" :min="1" :max="10" label="描述文字"
            :disabled="dialog.disable"></el-input-number>
        </el-form-item>
        <el-form-item label="负责人" :label-width="formLabelWidth">
          <el-input v-model="deptForm.leader" autocomplete="off" :disabled="dialog.disable"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="deptForm.phone" autocomplete="off" :disabled="dialog.disable"> </el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="deptForm.email" autocomplete="off" :disabled="dialog.disable"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitFrom()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>

import { } from '@/api/sys/sys'
import { addDept, updateDept, delDept } from '@/api/sys/dept'
import { queryDeptTree } from '@/api/common/common'
export default {
  name: "Depart",
  data() {
    return {
      tableData: [],
      dialog: {
        dialogFormVisible: false,
        title: '新增下级部门',
        disable: true,
      },
      deptForm: {
        orderNum: 1,
        parentId: 0
      },
      formLabelWidth: "120px",
      dialogTitle: 1,
      row: {}
    };
  },
  watch: {},
  mounted() {
    this.queryAll();
  },
  created() { },
  methods: {
    queryAll() {
      queryDeptTree().then(res => {
        if (res.code === 200) {
          this.tableData = res.data;
        }
      })
    },
    // 查看部门
    queryDept(row) {
      this.dialog.dialogFormVisible = true;
      this.dialog.title = '查看部门';
      this.deptForm = row;
      this.dialog.disable = true;
    },
    //添加部门
    addDept(row) {
      this.dialog.dialogFormVisible = true;
      this.dialog.disable = false;
      this.dialog.title = '新增下级部门'
      this.deptForm.parentId = row.deptId;

    },
    editDept(row) {
      this.dialog.dialogFormVisible = true;
      this.dialog.title = '修改部门';
      this.deptForm = row;
      this.dialog.disable = false;
    },
    // 删除部门
    delDept(row) {
      delDept({
        'deptId':row.deptId
      }).then(res => {
        if (res.code === 200) {
            this.$message(res.msg);
            this.queryAll();
        }
      })

    },
    //新增部门
    submitFrom() {
      if (this.dialog.title === '新增下级部门') {
        addDept(JSON.stringify(this.deptForm)).then(res => {
          if (res.code == 200) {
            this.handleClose();
            this.queryAll();
          }
        })
      } else {
        updateDept(JSON.stringify(this.deptForm)).then(res => {
          if (res.code == 200) {
            this.handleClose();
            this.queryAll();
          }
        });
      }


    },
    //关闭弹窗
    handleClose() {
      this.dialog.dialogFormVisible = false;
      this.clearForm();
    },
    //清空表单
    clearForm() {
      this.deptForm = {};
    },
  },
};
</script>
<style>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>